<template>
  <div class="content">
    <div class="login-header">
      <div class="h-logo"></div>
    </div>

    <div class="register-top-box">
      <div class="reg-title">手机号注册</div>
      <div class="reg-tps">亲，欢迎注册小白二手车账号</div>
    </div>

    <div class="login-box reg">
      <van-cell-group>
        <van-field class="login-input" v-model="username" clearable placeholder="请输入手机号码" left-icon="phone" />


        <van-field class="login-input" v-model="password" type="password" placeholder="请输入密码" left-icon="lock">
        </van-field>

        <van-field class="login-input" v-model="code" type="number" placeholder="请输入验证码">
          <van-button slot="button" size="small" :disabled="codeStatus" class="login-code-btn" type="primary" @click="getCode(1)">
            <span v-if="!codeStatus" style="display: block;line-height: .72rem">获取验证码</span>
            <van-count-down ref="countDown" v-if="codeStatus" millisecond :time="60000" :auto-start="false" format="ss" @finish="getCode(0)"/>
          </van-button>
        </van-field>

      </van-cell-group>

      <van-button type="info" class="login-btn" @click="postSave">同意协议并注册</van-button>

      <div class="reg-bottom-tps">
        <van-checkbox v-model="agree">已阅读并同意以下协议：<a href="" class="link">《小白二手车服务协议》</a></van-checkbox>
      </div>
      <div class="login-bottom-tps" style="text-align: center">
        <router-link :to="{name:'Login'}">已有账号，<span style="color:#2C8DFF ">点击登录</span></router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    components: {
    },
    data() {
      return {
        username:"",
        password:"",
        code:"",
        codeStatus:false,
        agree:true,
      }
    },
    computed: {},
    mounted: function () {

    },
    methods: {
      //注册
      postSave(){
        var that=this;
        if(!that.is_mobile(that.username)){
          this.$toast('请输入正确的手机号码！');
          return false;
        }

        if(that.password=="" || that.password.length<6){
          this.$toast('请输入不小于6个字符的密码！');
          return false;
        }

        if(that.code==""){
          this.$toast('请输入验证码！');
          return false;
        }

        if(!that.agree){
          this.$toast('必须同意《小白二手车服务协议》！');
          return false;
        }


        that.$api.login.register({
          mobile: that.username,
          password: that.password,
          code: that.code,
        }).then(res=> {
          res=res.data;

          if(res.status){
            this.$toast('注册成功！');

            setTimeout(() => {
              that.$router.replace({
                path: '/login'
              });
            }, 800);

          }else{
            this.$toast(res.msg);
          }
        });
      },

      //获取验证码
      getCode(status){
        if(!this.is_mobile(this.username)){
          this.$toast('请输入正确的手机号码！');
          return false;
        }

        if(status){
          this.$api.login.getCode({
            mobile:this.username
          }).then(res=>{
            res=res.data;

            if(res.status){
              this.codeStatus=true;
              this.$refs.countDown.start();
            }else{
              this.$toast(res.msg);
            }
          });
        }else{
          this.codeStatus=false;
          this.$refs.countDown.reset();
        }

      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/login.scss";
</style>
